<template>
	<!-- 	<view class="custom_header" style="height: {{navH}}px">
		<view>左侧内容</view>
		<view>首页</view>
		<view>右侧内容</view>
	</view> -->
	<view>
		<view class="header_Top">
			<view class="header_Top1">
				<view class='index1' @click='indexShow(1)'>
					今日日程
				</view>
				<view class='index2' @click='indexShow(2)'>
					数据看板
				</view>
				<view class='index3' @click='indexShow(3)'>
					待办事项
				</view>
				<view class='index4' @click='indexShow(4)'>
					工作动态
				</view>
			</view>
			<view class='fdj'>
				<span class="iconfont icon-fangdajing font1"></span>
			</view>
		</view>
		<view>
			<view class="" v-show="index==1">
				<view class="" style='height: 100rpx;display: flex; justify-content: space-around;'>
					<view class="" style="width: 200rpx;height: 60rpx;text-align: center;line-height: 60rpx;">
						<span>{{`${new Date().getFullYear()}-${new Date().getMonth()+1}-
						${new Date().getDate()}`}}</span>
					</view>
					<view class="">
						<view
							style='width: 100rpx;height: 60rpx;text-align:center; color: #1e85fe; line-height: 60rpx;border: 2rpx solid #1e85fe;border-radius: 15rpx;'>
							更多</view>
					</view>
				</view>
				<view style='display: flex;padding: 0px 60rpx;'>
					<view class="" v-for="(item,index) in arr" :key="index" style="flex: 1;text-align: center;">
						<p style='width:80rpx;height: 80rpx;line-height: 80rpx;'>{{item.x}}</p>
						<p style='width:80rpx;height: 80rpx;line-height: 80rpx;border-radius: 50%;'
							@click="show1(index)">
							{{item.y}}
						</p>
					</view>
				</view>
				<view class="" v-show="indexs==0" style="padding: 0 70rpx;">
					<view class="" style="
					display: flex;align-items: center; justify-content: space-around;
					border-left:4px solid red ;
						height:100rpx;
						margin-bottom: 20rpx;
						margin-top: 60rpx;
						" v-for="(items,index) in user" :key="index">
						<view class="left"
							style="height:100rpx;display: flex;flex-direction:column;justify-content: space-around;">
							<p>{{items.user0}}</p>
							<p>{{items.user1}}</p>
						</view>
						<view class="right">
							{{items.user2}}
						</view>
					</view>

				</view>
				<view class="" v-show="indexs==1" style="padding: 0 70rpx;">

					<view class="" style="
					display: flex;align-items: center; justify-content: space-around;
					border-left:4px solid red ;
						height:100rpx;
						margin-bottom: 20rpx;
						margin-top: 60rpx;
						" v-for="(items,index) in user" :key="index">
						<view class="left"
							style="height:100rpx;display: flex;flex-direction:column;justify-content: space-around;">
							<p>{{items.user0}}</p>
							<p>{{items.user1}}</p>
						</view>
						<view class="right">
							{{items.user2}}
						</view>
					</view>
				</view>
				<view class="" v-show="indexs==2" style="padding: 0 70rpx;">


					<view class="" style="
					display: flex;align-items: center; justify-content: space-around;
					border-left:4px solid red ;
						height:100rpx;
						margin-bottom: 20rpx;
						margin-top: 60rpx;
						" v-for="(items,index) in user" :key="index">
						<view class="left"
							style="height:100rpx;display: flex;flex-direction:column;justify-content: space-around;">
							<p>{{items.user0}}</p>
							<p>{{items.user1}}</p>
						</view>
						<view class="right">
							{{items.user2}}
						</view>
					</view>
				</view>
				<view class="" v-show="indexs==3">

				</view>
				<view class="" v-show="indexs==4"></view>
				<view class="" v-show="indexs==5"></view>
				<view class="" v-show="indexs==6"></view>
			</view>
			<view class="" v-show="index==2" style="padding: 0 24rpx;">
				<view class="" style="border: 1px solid #fff">
					<view class="" style="display: flex;padding: 0 70rpx; justify-content: space-between;">
						<view class="">
							业绩目标
						</view>
						<view class="">
							详情
						</view>
					</view>
					<view class="">
						<view class="one1" style="display:flex;">
							<view class="one1_left">
								<LEchart class="echart" :widths='400' :heights='400' ref="chart" id="echart1"
									@finished='init'>
								</LEchart>
							</view>
							<view class="one1_right" style="line-height: 80rpx;">
								<p>目标金额</p>
								<p>￥100.000.00</p>
								<p>完成金额</p>
								<p>￥40.000.00</p>
							</view>
						</view>
					</view>
					<view class="" style="display: flex;padding: 0 70rpx; justify-content: space-between;">
						<view class="">
							成交排名
						</view>
						<view class="">
							详情
						</view>
					</view>
					<view class="" style='height: 50px;line-height: 50px;'>
						<span>01</span>
						<span>李小刚</span>
						<span>￥100.000.00</span>
					</view>
					<view class="" style='height: 40rpx;'>
						<progress :percent="10" stroke-width="3" />
					</view>

					<view class="" style='height: 50px;line-height: 50px;'>
						<span>02</span>
						<span>王小红</span>
						<span>￥90.000.00</span>
					</view>
					<view class="" style='height: 40rpx;'>
						<progress :percent="10" stroke-width="3" />
					</view>
					<view class="" style='height: 50px;line-height: 50px;'>
						<span>03</span>
						<span>周晓明</span>
						<span>￥85.000.00</span>
					</view>
					<view class="" style='height: 40rpx;'>
						<progress :percent="10" stroke-width="3" />
					</view>
					<view class="one1_left">
						<LEchart class="echart" :widths='400' :heights='400' ref="chart1" id="echart1" @finished='init'>
						</LEchart>
					</view>
					<view class="">
						<span>时间</span>
						<span>商机数量</span>
						<span>预计销售金额</span>
					</view>
					<view class="">
						<span>2019-01</span>
						<span>1000</span>
						<span>￥1.000.000.00</span>
					</view>
					<view class="">
						<span>2019-01</span>
						<span>1000</span>
						<span>￥1.000.000.00</span>
					</view>
					<view class="">
						<span>2019-01</span>
						<span>1000</span>
						<span>￥1.000.000.00</span>
					</view>
					<view class="">
						<span>2019-01</span>
						<span>1000</span>
						<span>￥1.000.000.00</span>
					</view>
					<view class="">
						<span>2019-01</span>
						<span>1000</span>
						<span>￥1.000.000.00</span>
					</view>
					<view class="">
						<span>2019-01</span>
						<span>1000</span>
						<span>￥1.000.000.00</span>
					</view>
					<view class="">
						<span>2019-01</span>
						<span>1000</span>
						<span>￥1.000.000.00</span>
					</view>
				</view>

			</view>
			<view class="" v-show="index==3">
				<span>
					2019-07-29
				</span>
				<view class=""
					style='display: flex;justify-content: space-around; height: 100rpx;line-height: 100rpx;border: 1px solid #ccc;'>
					<span>待跟进任务</span>
					<span>10></span>
				</view>
				<view class=""
					style='display: flex;justify-content: space-around;height: 100rpx;line-height: 100rpx;border: 1px solid #ccc;'>
					<span>待跟进任务</span>
					<span>10></span>
				</view>
				<view class=""
					style='display: flex;justify-content: space-around;height: 100rpx;line-height: 100rpx;border: 1px solid #ccc;'>
					<span>待跟进任务</span>
					<span>10></span>
				</view>
				<view class=""
					style='display: flex;justify-content: space-around;height: 100rpx;line-height: 100rpx;border: 1px solid #ccc;'>
					<span>待跟进任务</span>
					<span>10></span>
				</view>
				<view class=""
					style='display: flex;justify-content: space-around;height: 100rpx;line-height: 100rpx;border: 1px solid #ccc;'>
					<span>待跟进任务</span>
					<span>10></span>
				</view>
				<view class=""
					style='display: flex;justify-content: space-around;height: 100rpx;line-height: 100rpx;border: 1px solid #ccc;'>
					<span>待跟进任务</span>
					<span>10></span>
				</view>
				<view class=""
					style='display: flex;justify-content: space-around;height: 100rpx;line-height: 100rpx;border: 1px solid #ccc;'>
					<span>待跟进任务</span>
					<span>10></span>
				</view>
				<view class=""
					style='display: flex;justify-content: space-around;height: 100rpx;line-height: 100rpx;border: 1px solid #ccc;'>
					<span>待跟进任务</span>
					<span>10></span>
				</view>
				<view class=""
					style='display: flex;justify-content: space-around;height: 100rpx;line-height: 100rpx;border: 1px solid #ccc;'>
					<span>待跟进任务</span>
					<span>10></span>
				</view>
				<view class=""
					style='display: flex;justify-content: space-around;height: 100rpx;line-height: 100rpx;border: 1px solid #ccc;'>
					<span>待跟进任务</span>
					<span>10></span>
				</view>
				<view class=""
					style='display: flex;justify-content: space-around;height: 100rpx;line-height: 100rpx;border: 1px solid #ccc;'>
					<span>待跟进任务</span>
					<span>10></span>
				</view>
			</view>
			<view class="" v-show="index==4">
				<view class=""
					style='border:1px solid #ccc;display: flex;justify-content: space-around;margin-bottom: 20px;'>
					<view class="left1">
						<img src="../../static/bangongbao_o.png" style="width: 50px;height: 50px;" alt="" />
					</view>
					<view class="right1">
						<p>
							<span>赵小刚</span>
							<span>销售经理</span>
						</p>
						<p>
							<span>为了更好的明天,大家一起努力</span>
						</p>
						<p>
							<span>广东省深圳市南山区科技园中区科院路</span>
						</p>
					</view>
				</view>
				<view class=""
					style='border:1px solid #ccc;display: flex;justify-content: space-around;margin-bottom: 20px;'>
					<view class="left1">
						<img src="../../static/bangongbao_o.png" style="width: 50px;height: 50px;" alt="" />
					</view>
					<view class="right1">
						<p>
							<span>赵小刚</span>
							<span>销售经理</span>
						</p>
						<p>
							<span>为了更好的明天,大家一起努力</span>
						</p>
						<p>
							<span>广东省深圳市南山区科技园中区科院路</span>
						</p>
					</view>
				</view>
				<view class=""
					style='border:1px solid #ccc;display: flex;justify-content: space-around;margin-bottom: 20px;'>
					<view class="left1">
						<img src="../../static/bangongbao_o.png" style="width: 50px;height: 50px;" alt="" />
					</view>
					<view class="right1">
						<p>
							<span>赵小刚</span>
							<span>销售经理</span>
						</p>
						<p>
							<span>为了更好的明天,大家一起努力</span>
						</p>
						<p>
							<span>广东省深圳市南山区科技园中区科院路</span>
						</p>
					</view>
				</view>
				<view class=""
					style='border:1px solid #ccc;display: flex;justify-content: space-around;margin-bottom: 20px;'>
					<view class="left1">
						<img src="../../static/bangongbao_o.png" style="width: 50px;height: 50px;" alt="" />
					</view>
					<view class="right1">
						<p>
							<span>赵小刚</span>
							<span>销售经理</span>
						</p>
						<p>
							<span>为了更好的明天,大家一起努力</span>
						</p>
						<p>
							<span>广东省深圳市南山区科技园中区科院路</span>
						</p>
					</view>
				</view>
				<view class=""
					style='border:1px solid #ccc;display: flex;justify-content: space-around;margin-bottom: 20px;'>
					<view class="left1">
						<img src="../../static/bangongbao_o.png" style="width: 50px;height: 50px;" alt="" />
					</view>
					<view class="right1">
						<p>
							<span>赵小刚</span>
							<span>销售经理</span>
						</p>
						<p>
							<span>为了更好的明天,大家一起努力</span>
						</p>
						<p>
							<span>广东省深圳市南山区科技园中区科院路</span>
						</p>
					</view>
				</view>
				<view class=""
					style='border:1px solid #ccc;display: flex;justify-content: space-around;margin-bottom: 20px;'>
					<view class="left1">
						<img src="../../static/bangongbao_o.png" style="width: 50px;height: 50px;" alt="" />
					</view>
					<view class="right1">
						<p>
							<span>赵小刚</span>
							<span>销售经理</span>
						</p>
						<p>
							<span>为了更好的明天,大家一起努力</span>
						</p>
						<p>
							<span>广东省深圳市南山区科技园中区科院路</span>
						</p>
					</view>
				</view>
				<view class=""
					style='border:1px solid #ccc;display: flex;justify-content: space-around;margin-bottom: 20px;'>
					<view class="left1">
						<img src="../../static/bangongbao_o.png" style="width: 50px;height: 50px;" alt="" />
					</view>
					<view class="right1">
						<p>
							<span>赵小刚</span>
							<span>销售经理</span>
						</p>
						<p>
							<span>为了更好的明天,大家一起努力</span>
						</p>
						<p>
							<span>广东省深圳市南山区科技园中区科院路</span>
						</p>
					</view>
				</view>
				<view class=""
					style='border:1px solid #ccc;display: flex;justify-content: space-around;margin-bottom: 20px;'>
					<view class="left1">
						<img src="../../static/bangongbao_o.png" style="width: 50px;height: 50px;" alt="" />
					</view>
					<view class="right1">
						<p>
							<span>赵小刚</span>
							<span>销售经理</span>
						</p>
						<p>
							<span>为了更好的明天,大家一起努力</span>
						</p>
						<p>
							<span>广东省深圳市南山区科技园中区科院路</span>
						</p>
					</view>
				</view>
				<view class=""
					style='border:1px solid #ccc;display: flex;justify-content: space-around;margin-bottom: 20px;'>
					<view class="left1">
						<img src="../../static/bangongbao_o.png" style="width: 50px;height: 50px;" alt="" />
					</view>
					<view class="right1">
						<p>
							<span>赵小刚</span>
							<span>销售经理</span>
						</p>
						<p>
							<span>为了更好的明天,大家一起努力</span>
						</p>
						<p>
							<span>广东省深圳市南山区科技园中区科院路</span>
						</p>
					</view>
				</view>
				<view class=""
					style='border:1px solid #ccc;display: flex;justify-content: space-around;margin-bottom: 20px;'>
					<view class="left1">
						<img src="../../static/bangongbao_o.png" style="width: 50px;height: 50px;" alt="" />
					</view>
					<view class="right1">
						<p>
							<span>赵小刚</span>
							<span>销售经理</span>
						</p>
						<p>
							<span>为了更好的明天,大家一起努力</span>
						</p>
						<p>
							<span>广东省深圳市南山区科技园中区科院路</span>
						</p>
					</view>
				</view>
				<view class=""
					style='border:1px solid #ccc;display: flex;justify-content: space-around;margin-bottom: 20px;'>
					<view class="left1">
						<img src="../../static/bangongbao_o.png" style="width: 50px;height: 50px;" alt="" />
					</view>
					<view class="right1">
						<p>
							<span>赵小刚</span>
							<span>销售经理</span>
						</p>
						<p>
							<span>为了更好的明天,大家一起努力</span>
						</p>
						<p>
							<span>广东省深圳市南山区科技园中区科院路</span>
						</p>
					</view>
				</view>

			</view>
		</view>
	</view>

</template>

<script setup lang="ts">
	import LEchart from "@/uni_modules/lime-echart/components/l-echart/l-echart.vue"
	import { ref, reactive } from "vue"
	// lime-echart是一个demo的组件，用于测试组件
	// import LEchart from '@/components/lime-echart/lime-echart.vue'
	import { onMounted } from "vue"
	// nvue 不需要引入
	// #ifdef VUE3
	// #ifdef MP
	// 由于vue3 使用vite 不支持umd格式的包，小程序依然可以使用，但需要使用require
	const echarts = require('../../static/echarts.min');
	// #endif
	// #ifndef MP
	// 由于 vue3 使用vite 不支持umd格式的包，故引入npm的包
	import * as echarts from 'echarts';
	// #endif
	// #endif


	let chart = ref(); // 获取dom
	let chart1 = ref() // 获取漏斗图的dom元素
	const state = reactive({
		option: {},
	})
	const state1 = reactive({
		option: {},
	})
	state.option = {
		tooltip: {
			trigger: 'item',
			formatter: '{a} <br/>{b}: {c} ({d}%)'
		},
		graphic: [
			{
				type: 'text',// 类型，可以是文字、图片或其它类型
				id: 'text1',
				left: 'center',
				top: '46%',
				style: {
					text: '完成度',
					fill: '#58a3f7', // 文字的颜色
					fontSize: 18
				}
			},
			{
				type: 'text',
				id: 'text2',
				left: 'center',
				top: '52%',
				style: {
					text: '40%',
					fill: '#e9e9e9',
					fontSize: 33,
				}
			}
		],
		color: ['#58a3f7', '#9ca5ae'],
		series: [
			{
				name: '访问来源',
				type: 'pie',
				radius: ['50%', '70%'],
				avoidLabelOverlap: false,

				label: {
					normal: {
						show: true,
						position: 'center',
						formatter: [
							''
						].join('\n'),
						rich: {
							a: {
								color: '#fff',
								fontSize: 18,
								lineHeight: 30
							},
							b: {
								color: 'yellow',
								fontSize: 20,
								foneWeight: 'bold',
								textShadowBlur: 20,
								textShadowColor: 'yellow'
							},

						}
					}
				},
				labelLine: {
					normal: {
						show: false
					}
				},
				data: [
					{ value: 40, name: '直接访问', color: "#cccccc" },
					{ value: 100, name: '邮件营销', color: "#000000" },
				]
			},
			{
				name: '边框1',
				type: 'pie',
				hoverAnimation: false,
				radius: ['75%', '90%'],

				labelLine: {
					normal: {
						show: false
					}
				},
				itemStyle: {
					normal: {
						borderWidth: 1,
						borderColor: "#000000",
						opacity: 0
					}
				},
				data: [
					{
						value: 100,
						tooltip: {
							show: false
						}
					}
				]
			},
		]
	};

	state1.option = {
		title: {
			text: ''
		},
		tooltip: {
			trigger: 'item',
			formatter: '{a} <br/>{b} : {c}%'
		},
		toolbox: {
			feature: {
				dataView: { readOnly: false },
				restore: {},
				saveAsImage: {}
			}
		},
		legend: {
			data: ['Show', 'Click', 'Visit', 'Inquiry', 'Order']
		},
		series: [
			{
				name: 'Funnel',
				type: 'funnel',
				left: '10%',
				top: 60,
				bottom: 60,
				width: '80%',
				min: 20,
				max: 100,
				minSize: '20%',
				maxSize: '100%',
				sort: 'descending',
				gap: 2,
				label: {
					show: true,
					position: 'inside'
				},
				labelLine: {
					length: 10,
					lineStyle: {
						width: 1,
						type: 'solid'
					}
				},
				itemStyle: {
					borderColor: '#fff',
					borderWidth: 1
				},
				emphasis: {
					label: {
						fontSize: 20
					}
				},
				data: [
					{ value: 60, name: '36%' },
					{ value: 40, name: '25%' },
					{ value: 20, name: '18%' },
					{ value: 80, name: '10%' },
					{ value: 100, name: '8%' }
				]
			}
		]
	}
	// 组件能被调用必须是组件的节点已经被渲染到页面上
	onMounted(() => {
		chart.value.init(echarts, chart => {
			chart.setOption(state.option);
		});
		chart1.value.init(echarts, chart1 => {
			chart1.setOption(state1.option)
		})
	})
	// 渲染完成
	const init = () => {
		console.log("渲染完成");
	}



	const progress = ref(200)
	const index = ref(1)
	const indexs = ref(0)
	const indexShow = (ind : number) => {
		index.value = ind
	}
	const show1 = (i : any) => {
		console.log(i)
		indexs.value = i
	}
	var time = new Date(`2024/4/7`)
	let user = ref<any>([
		{
			'user0': '11:00 - 12:00',
			'user1': '与客户沟通报价事宜',
			'user2': '未开始'
		},
		{
			'user0': '11:00 - 12:00',
			'user1': '与客户沟通报价事宜',
			'user2': '未开始'
		},
		{
			'user0': '11:00 - 12:00',
			'user1': '与客户沟通报价事宜',
			'user2': '未开始'
		},
		{
			'user0': '11:00 - 12:00',
			'user1': '与客户沟通报价事宜',
			'user2': '未开始'
		}
	])
	var str = ref("");
	var arr = reactive<any>([
		{
			x: '日',
			y: '7',
		},
		{
			x: '一',
			y: '8',
		},
		{
			x: '二',
			y: '9',
		},
		{
			x: '三',
			y: '10',
		},
		{
			x: '四',
			y: '11',
		},
		{
			x: '五',
			y: '12',
		},

	])
</script>

<style lang="scss" scoped>
	.custom_header {
		display: flex;
		justify-content: space-between;
		width: 100vw;
		line-height: 180rpx;
		font-weight: bold;
		position: fixed;
		left: 0;
		top: 0;
	}

	.header_Top {
		position: relative;

		.header_Top1 {
			padding-left: 12rpx;
			display: flex;
			padding-top: 50rpx;
			height: 130rpx;
			line-height: 130rpx;

			view {
				width: 150rpx;
				text-align: center;
				font-size: 30rpx;
				font-weight: 600;
			}
		}

		.fdj {
			position: absolute;
			top: 50%;
			right: 50%;
			margin-right: -300rpx;
			width: 40rpx;
			height: 40rpx;
			text-align: center;
			line-height: 40rpx;

			.font1 {
				font-size: 32rpx;

			}
		}
	}

	// .echart {
	// 	width: 100rpx;
	// 	height: 100rpx;
	// }
</style>